<!--
  关键统计组件
  以列表形式展示关键统计数据
-->
<template>
  <div class="card">
    <h3>关键统计</h3>
    <ul>
      <li v-for="stat in statistics" :key="stat.label">
        <span>{{ stat.label }}：</span>
        <span>{{ stat.value }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  statistics: {
    type: Array,
    required: true,
  },
});
</script>

<style scoped>
.card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 10px 0;
}
</style>